<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 下发状态 -->
          <!-- <bjSelect
            :allowClear="true"
            placeholder="请选择下发状态"
            :dataResource="stateSource"
            v-model="state"
            @change="conditionChange($event, 'state')"
          >
          </bjSelect> -->
          <!-- 梁类型 -->
          <bjSelect
            :allowClear="true"
            :loading="beamTypeLoading"
            placeholder="请选择梁类型"
            :replaceFields="beamTypeReplaceFields"
            :dataResource="beamTypeSource"
            v-model="beamType"
            @change="conditionChange($event, 'beamType')"
          >
          </bjSelect>
          <!-- 梁号 -->
          <a-input
            placeholder="请输入梁号"
            v-model.trim="componentParts"
            allowClear
          />
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="生产台账">
        <div>
          <a-button type="primary" @click="exportModalVisible = true">
            导出
          </a-button>
        </div>
      </div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="120"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoEdit(row)"> 编辑 </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <addModal
      :visible.sync="addModalVisible"
      :dataSource="rows"
      :key="timestamp"
    ></addModal>
    <!-- 导出弹窗 -->
    <exportModal :visible.sync="exportModalVisible"></exportModal>
  </div>
</template>

<script>
import bjSelect from "@/components/bj-select";
import addModal from "./components/addModal.vue";
import exportModal from "./components/exportModal.vue";
import { getDickeyList } from "@/api/common";
import { getLedgerList } from "@/api/wisdom-beam/ledger.js";
export default {
  components: {
    bjSelect,
    addModal,
    exportModal,
  },
  data() {
    return {
      //状态
      state: undefined,
      stateSource: [
        {
          key: "1",
          value: "待完成",
        },
        {
          key: "2",
          value: "已完成",
        },
      ],
      //所属梁类型
      beamTypeLoading: false,
      beamType: undefined,
      beamTypeSource: [],
      beamTypeReplaceFields: { key: "dicValue", label: "dicDesc" },
      //梁号
      componentParts: "",
      loading: false,
      columns: [
        {
          title: "桥梁名称",
          key: "bridgeName",
          width: 180,
        },
        {
          title: "联",
          key: "unite",
          width: 180,
        },
        {
          title: "梁型",
          key: "model",
          width: 180,
        },
        {
          title: "幅别",
          key: "amClass",
          width: 180,
        },
        {
          title: "梁号",
          key: "componentParts",
          width: 180,
        },
        {
          title: "钢筋工序验收时间",
          key: "testTime",
          width: 180,
        },
        {
          title: "开仓日期",
          key: "kkDate",
          width: 180,
        },
        {
          title: "收仓日期",
          key: "skDate",
          width: 180,
        },
        {
          title: "浇筑历时",
          key: "jzLast",
          width: 180,
        },
        {
          title: "砼标号",
          key: "strengthGradeDesc",
          width: 180,
        },
        {
          title: "设计砼量(m³)",
          key: "designVolume",
          width: 180,
        },
        {
          title: "实际方量(m³)",
          key: "actualVolume",
          width: 180,
        },
        {
          title: "波纹管用量(m)",
          key: "bwgDosage",
          width: 180,
        },
        {
          title: "钢绞线设计量(kg)",
          key: "gjxDesign",
          width: 180,
        },
        {
          title: "钢绞线实际用量(kg)",
          key: "gjxDosage",
          width: 180,
        },
        {
          title: "钢筋设计量(kg)",
          key: "gjDesign",
          width: 180,
        },
        {
          title: "钢筋实际用量(kg)",
          key: "gjDosage",
          width: 180,
        },
        {
          title: "张拉时间",
          key: "zlDate",
          width: 180,
        },
        {
          title: "压浆时间",
          key: "yjDate",
          width: 180,
        },
        {
          title: "压浆量(kg)",
          key: "yjDosage",
          width: 180,
        },
        {
          title: "试块试验日期(kg)",
          key: "sksyDate",
          width: 180,
        },
        {
          title: "试块强度(MPa)",
          key: "skStrength",
          width: 180,
        },
        {
          title: "回弹检测日期",
          key: "htjcDate",
          width: 180,
        },
        {
          title: "回弹检测(MPa)",
          key: "htjcMPa",
          width: 180,
        },
        {
          title: "备注",
          key: "remark",
          width: 180,
        },
        {
          title: "评价",
          key: "evaluate",
          width: 180,
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      addModalVisible: false,
      rows: {},
      exportModalVisible: false,
      timestamp: 0,
    };
  },

  mounted() {
    this.getBeamType();
    this.getTableData();
  },
  methods: {
    //查询梁类型
    getBeamType() {
      this.beamTypeLoading = true;
      return new Promise((resolve, reject) => {
        getDickeyList({ dictKey: "TASK_MANAGER_TYPE" })
          .then((res) => {
            let { data } = res;
            this.beamTypeSource = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.beamTypeSource = [];
            reject();
          })
          .finally((_) => {
            this.beamTypeLoading = false;
          });
      });
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { componentParts, beamType, state } = this;
      return new Promise((resolve, reject) => {
        getLedgerList({
          page,
          pageSize,
          componentParts,
          completeStatus: state?.key,
          beamType: beamType?.key,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result?.rows || [];
            this.pager.total = result?.total || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //监听筛选条件切换
    conditionChange(ev, keyName) {
      this[keyName] = ev;
      this.search();
    },

    gotoEdit(row = {}) {
      this.timestamp = Date.now();
      this.addModalVisible = true;
      this.rows = {
        title: "编辑",
        hideDisable: false,
        ...row,
      };
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped></style>
